<template>
    <div>
      <ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for="item in list" :key="item.pic">
					<router-link :to="'/home/newsinfo/'+ item.pic">
						<img class="mui-media-object mui-pull-left" :src="item.pic" alt="">
						<div class="mui-media-body">
							<h1>{{item.txt}}</h1>
							<p class='mui-ellipsis'>
								<span>发表时间:{{item.time | dateFormat }}</span>
								<span>点击：{{item.click}}次</span>
							</p>
						</div>
					</router-link>
				</li>
			</ul>
    </div>
</template>

<script>
import zz1 from '../../images/zz1.jpg'
import zz2 from '../../images/zz2.jpg'
import zz3 from '../../images/zz3.jpg'
import zz4 from '../../images/zz4.jpg'
import zz5 from '../../images/zz5.jpg'
import zz6 from '../../images/zz6.jpg'
import zz7 from '../../images/zz7.jpg'
import zz8 from '../../images/zz8.jpg'
export default {
    data(){
        return {
            list:[
                { pic:zz1,txt:'朱一龙帅帅帅~~~',time:new Date(),click:'1'},
								{ pic:zz2,txt:'好帅啊~~ L龙龙  朱一龙',time:new Date(),click:'2'},
								{ pic:zz3,txt:'朱一龙帅帅帅~~~',time:new Date(),click:'1'},
								{ pic:zz4,txt:'好帅啊~~ L龙龙  朱一龙',time:new Date(),click:'2'},
								{ pic:zz5,txt:'朱一龙帅帅帅~~~',time:new Date(),click:'1'},
								{ pic:zz6,txt:'好帅啊~~ L龙龙  朱一龙',time:new Date(),click:'2'},
								{ pic:zz7,txt:'朱一龙帅帅帅~~~',time:new Date(),click:'1'},
								{ pic:zz8,txt:'好帅啊~~ L龙龙  朱一龙',time:new Date(),click:'2'},
								{ pic:zz1,txt:'朱一龙帅帅帅~~~',time:new Date(),click:'1'},
								{ pic:zz2,txt:'好帅啊~~ L龙龙  朱一龙',time:new Date(),click:'2'},
								
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .mui-table-view{
			li{
				h1{
					font-size: 14px;
				}
				.mui-ellipsis{
				font-size: 12px;
				color:blue;
				display: flex;
				justify-content: space-between;
			}
			img{
				width: 42px;
				height: 42px;
			}
			}
			
    }
</style>